<template>
  <div class="page-container">
    <div class="body-container">
      <div class="nav-container">
        <img :src="navImg" />
      </div>
      <div
        class="content-container"
        v-for="(item, index) of eachList"
        :key="index + 'list'"
      >
        <div class="year">{{ item.year }}年</div>
        <template v-for="(item, index) of item.mounth">
          <div :key="index + 'mn'" class="mounth">{{ item.mn }}月</div>

          <div class="list" v-for="item of item.data" :key="item.id + 'text'">
            <div class="inline"></div>
            <div class="day-container">
              <span class="left-day">{{ item.createdAt | formtDay }}</span>
              <span :class="['text', item.class]">{{ item.title }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>




<script>
import GoTop from "@inotom/vue-go-top";
import ApiService from "@/service/index";
import { formtDay } from "@/utils/tools";
import { IMG_URL } from "@/config/config";

const api = new ApiService();
export default {
  name: "FileViews",
  data() {
    return {
      navImg: IMG_URL + "filenav.png",
      listArray: [],
      limit: 3,
      offset: 0,
      eachList: [],
      preList: [],
      showMore: false
    };
  },
  mounted() {
    this.listenerScroll();
  },
  filters: { formtDay },
  watch: {
    showMore(newvalue, oldvalue) {
      if (oldvalue != newvalue) {
        if (this.showMore) {
          // console.log(1);
          this.showMoreList();
        }
      }
    }
  },
  methods: {
    async showMoreList() {
      this.offset += this.limit;
      let array = await api.findEssay({
        limit: this.limit,
        offset: this.offset
      });
      
      let formtarray = this.appendFormtListArray(array, this.preList);
      this.preList = this.formtListArry(array);
      this.showMore = false;
    },
    listenerScroll() {
      window.addEventListener("scroll", this.handleScroll);
    },
    handleScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      if (scrollTop + clientHeight == scrollHeight) {
        this.showMore = true;
      }
    },
    appendFormtListArray(newList, oldList) {
      let newFormtList = this.formtListArry(newList),
        returnArray = [];

      let oldYearArray = [];
      console.log(oldList);
      oldList.map(item => {
        oldYearArray.push(item.year);
      });

      // this.eachList.map((item)=>{

      // })
      console.log(newFormtList, oldYearArray);
      newFormtList.map((item, newindex) => {
        oldYearArray.map((elem, oldindex) => {
          console.log(item.year, elem);
          if (item.year === elem) {
            let yearCur = this.eachList.length - 1,
              mnCur = this.eachList[yearCur].mounth.length - 1,
              mn = this.eachList[yearCur].mounth[mnCur].mn;
            newFormtList[newindex].mounth.map(item => {
              if (item.mn === mn) {
                this.eachList[yearCur].mounth[mnCur].data.push(...item.data);
              } else {
                this.eachList[yearCur].mounth.push(item);
              }
            });
          } else {
            console.log(item);
            this.eachList.push(item);
            
          }
        });
      });

      return returnArray;
    },
    formtListArry(list) {
      let eachList = [],
        yearArr = [];
      // this.eachList[0].mounth[0].data.push({title:'这是测试的哈'})

      let arr = list.reduce((prev, elem, index, arr) => {
        let yearAll = elem.createdAt.substr(0, 4);
        let isPush = prev.every(item => {
          return item !== yearAll;
        });
        if (isPush) {
          prev.push(yearAll);
        }
        return prev;
      }, []);

      yearArr = arr;
      let curYear = new Date().getFullYear(),
        curMounth = new Date().getMonth() + 1;
      yearArr.map(itemyear => {
        let obj = {};
        obj.year = itemyear;
        obj.mounth = [];
        let filterYearObj = list.filter(item => {
          let year = item.createdAt.substr(0, 4);
          if (Number(year) < Number(curYear)) {
            item.class = " left-title";
          }
          return year === itemyear;
        });

        let filterMn = filterYearObj.reduce((prev, elem, index, arr) => {
          let mounth = elem.createdAt.substr(5, 2);
          let isPush = prev.every(item => {
            return item !== mounth;
          });
          if (isPush) {
            prev.push(mounth);
          }

          return prev;
        }, []);
        filterMn.map(elem => {
          let dataobj = {};
          dataobj.mn = elem;
          dataobj.data = [];
          let filterData = filterYearObj.filter(item => {
            let mounth = item.createdAt.substr(5, 2);

            if (Number(mounth) != Number(curMounth)) {
              item.class = " left-title";
            } else {
              item.class = " right-title";
            }
            return mounth === elem;
          });
          dataobj.data.push(...filterData);
          //console.log(dataobj);
          obj.mounth.push(dataobj);
        });
        eachList.push(obj);
      });
      return eachList;
    },
    async getEssayList() {
      this.listArray = await api.findEssay({
        limit: this.limit,
        offset: this.offset
      });
      let list = this.formtListArry(this.listArray);
      this.eachList = list;
      this.preList = list;
    }
  },
  async created() {
    this.getEssayList();
  }
};
</script>
<style lang="scss" scoped>
$theme: #f2db4d;
.body-container {
  width: 1305px;
  height: 100%;
  margin: 0 auto;
}
.nav-container {
  width: 103px;
  height: 94px;
  margin-top: 43px;
  img {
    width: 100%;
    height: 100%;
  }
}
.content-container {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  text-align: center;
  .year {
    font-size: 25px;
    font-weight: bold;
    width: 88px;
    margin: 0 auto;
  }
  .mounth {
    font-size: 18px;
    font-weight: bold;
    width: 45px;
    margin: 0 auto;
    margin-top: 23px;
  }
  .list {
    .inline {
      width: 5px;
      height: 50px;
      background-color: #000;
      margin: 0 auto;
    }
    .day-container {
      position: relative;
      .day {
        display: inline-block;
        width: 88px;
        text-align: center;
        margin: 0 auto;
        padding-left: 360px;
      }
      .left-day {
        display: inline-block;
        width: 88px;
        text-align: center;
        margin: 0 auto;
      }
      .text {
        cursor: pointer;
      }
      .left-title {
        position: absolute;
        right: 700px;
        text-align: right;
      }
      .right-title {
        position: absolute;
        left: 700px;
        text-align: left;
      }
      .text:hover {
        color: $theme;
      }
    }
  }
}
</style>